<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>  
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
	String uid = request.getParameter("uid");
	String tapesId = request.getParameter("tapesId");
	String type = request.getParameter("type");
%>
<html>
	<head>
		<meta charset="utf-8">
		<title>视频分享</title>
		<meta name="viewport" content="width=device-width">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="<%=basePath %>share/css/style.css" />
	</head>
	<body id="voidPC">
		<div class="top">
			<div class="content">
				<img src="<%=basePath %>share/img/logo.png" />
			</div>
		</div><!--top-->
		
		<div class="content">
			<h1 class="title" id="headName"></h1>
			<table  width="100%">
				<tr>
					<td width="50%">
						<div  class="voidDiv">
							<div class="imgBox">

							</div><!--imgBox-->
							
							<source>
								<audio src="" id="audio"></audio>
							</source>
							
							<div class="audio">
								<div class="playBtn" id="playBtn"></div>
								<div id="loadVal">音频加载中...</div>
								<div>
									<table width="100%">
										<tr>
											<td id="startTime">00:00</td>
											<td class="lengthTd">
												<input type='range' min='0' max='' value='0' id='range' /> 
											</td>
											<td id="endTime">00:00</td>
										</tr>
									</table>
								</div>
							</div><!--audio-->	
							
						</div>
					</td>
					<td width="50%">
						<div class="userDiv">
							<div class="headInfo">
								
								<div class="head">
									<div class="iconImg"><img id="head" src=""></div>
									<div class="name" id="userName"></div>
									
									<div class="textInfo">
										<span id="userSignature"></span>
									</div><!--textInfo-->
									
								</div><!--head-->
							</div><!--headInfo-->
							
							<div class="link">
								<a href="#" class="btn iOSBtn"></a>
								<a href="#" class="btn AndroidBtn"></a>
							</div><!--link-->
							
						</div><!--userDiv-->
					</td>
				</tr>
			</table>
		</div>
	</body>
	<script type="text/javascript" src="<%=basePath %>share/js/jquery-2.1.4.min.js" ></script>
	<script type="text/javascript">
	$(function(){
		$.ajax({
			url:'<%=basePath%>User/sharePage.do',
			data:{'uid':<%=uid%>,'tapesId':<%=tapesId%>,'type':<%=type%>},
			dataType:'json',
			type:'POST',
			success:function(val){
				var shareJson = {
						"code":val.code,
						"data":{
							"tapesUrl":val.data.url,
							"sex":val.data.sex,
							"headUrl":val.data.headUrl,
							"userName":val.data.nickName,
							"tapesName":val.data.tapesName,
							"userSignature":val.data.userSignature,
							"imgList":val.data.imglist
						},
						"message":val.message,
					}
					if(shareJson.data.imgList!=null){
						html='';
						$.each(shareJson.data.imgList,function(index,comment){
							html=html+'<img src="'+comment+'" />';
						})
						$('.imgBox').html(html);
					}else {
						$('.imgBox').html('<img src="<%=basePath %>share/img/pcbg.jpg"/>')
					}
					//头像地址
					if(shareJson.data.headUrl){
						document.getElementById('head').setAttribute('src',shareJson.data.headUrl);
					}else{
						if(shareJson.data.sex=='男'){
							document.getElementById('head').setAttribute('src','<%=basePath %>share/img/iconB.png');
						}else{
							document.getElementById('head').setAttribute('src','<%=basePath %>share/img/icon.png');
						}
					}
					//设置音频路径
					document.getElementById('audio').setAttribute('src',shareJson.data.tapesUrl);
					//头部姓名
					document.getElementById('userName').innerText=shareJson.data.userName;
					//顶部标题
					document.getElementById('headName').innerText=shareJson.data.tapesName;
					//用户签名
					if (shareJson.data.userSignature){
						document.getElementById('userSignature').innerText=shareJson.data.userSignature;						
					}else {
						document.getElementById('userSignature').innerText='一起来国学吧!'
					}

			}
		})
	})
		
		
		
		//图片轮播--------------------------------------------------------------------------
		var timer;
		var index = 1;
		function imgScroll(statue){
			if(statue=='play'){
				var length = $('.imgBox img').length-1;
				timer = setInterval(function(){//定时器
					$('.imgBox img').hide();
					$('.imgBox img').eq(index).fadeIn(300);
					console.log(index);
					index>=length?index=0:index++;
				},3000)
			}else if(statue=='pause'){
				clearInterval(timer);//清除轮播定时器
			}
			
		}
		
		
		//播放控制----------------------------------------------------------------
		var  Audio = document.getElementsByTagName("audio")[0];
		
		//播放与暂停
        document.getElementById('playBtn').onclick=function(){//播放与暂停
        	if (Audio.paused) {  
                Audio.play();  
               document.getElementById('playBtn').className='playBtn bgchange';
           } else if (Audio.played) {  
                Audio.pause();  
                document.getElementById('playBtn').className='playBtn';
            };  
        }
        
        
        //将秒数转为00:00格式   
		function timeToStr(time) {  
		    var m = 0,   
		    s = 0,   
		    _m = '00',   
		    _s = '00';   
		    time = Math.floor(time % 3600);   
		    m = Math.floor(time / 60);   
		    s = Math.floor(time % 60);   
		    _s = s < 10 ? '0' + s : s + '';   
		    _m = m < 10 ? '0' + m : m + '';   
		    return _m + ":" + _s;   
		} 
		
		//当音频可以播放的时候
		 Audio.addEventListener('canplay', function () {
		 	document.getElementById('loadVal').innerText='准备完毕';
		 })
		//当媒体从因缓冲而引起的暂停时候
		 Audio.addEventListener('waiting', function () {
		 	document.getElementById('loadVal').innerText='努力加载中...';
		 })
		
		$('.voidDiv').hover(function(){
				$('.audio').fadeIn();
			},function(){
				$('.audio').fadeOut();
			})
		
		 Audio.addEventListener('play', function () { //播放时事件
		 	document.getElementById('loadVal').innerText='播放中...';
		 	imgScroll('play');//轮播开始
		 	if($('.audio').is(':visible')){
				$('.audio').fadeOut(1000);
			}
		 })
		 
		  Audio.addEventListener('pause', function () { //暂停时事件
		 	imgScroll('pause');//轮播暂停
		 })
		 
		 Audio.addEventListener('timeupdate', function () { //播放时
		 	var allTime = Audio.duration;//全部时长
		 	var currentTime = Audio.currentTime;//当前时长
		 	document.getElementById('range').max=allTime.toFixed(0);//滑动条设置全部时长
		 	document.getElementById('range').value=currentTime.toFixed(0);//滑动条显示当前时长
		    document.getElementById('startTime').innerText = timeToStr(currentTime);//开始时间
		    document.getElementById('endTime').innerText = timeToStr(allTime);//结束时间
		   });  
		
       document.getElementById('range').onchange=function(){//拖动滑动条
       	 Audio.currentTime=this.value; 
       }
       
       //播放结束
	     Audio.addEventListener('ended', function () {
	     	 document.getElementById('playBtn').className='playBtn';//显示暂停按钮
	     	 $('.audio').fadeIn();
	     	 document.getElementById('loadVal').innerText='点击重播...';
	     })
		
	
	</script>
</html>
